#{extends 'ShowArticles/base.html' /}
#{set title:'News' /}

#{set 'moreSubpageStyles'}
<style type="text/css">
	img{
		position: relative;
		max-width: 100%;
		display: inline-block;
		margin:0 auto;
		box-shadow: 0px 1px 4px 1.5px rgba(0, 0, 0, .35), 0px 10px 35px 4px rgba(0, 0, 0, 0.25);
		-moz-box-shadow:0px 1px 4px 1.5px rgba(0, 0, 0, .35), 0px 10px 35px 4px rgba(0, 0, 0, 0.25);
		-webkit-box-shadow:0px 1px 4px 1.5px rgba(0, 0, 0, .35), 0px 10px 35px 4px rgba(0, 0, 0, 0.25);
	}
	.intro{
		display: block;
		background: rgba(0,0,0,0.5);
		-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* IE8 */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* IE5.5-7 */
		color: #fff;
		width:100%;
		height: 30px;
		position: relative;
		top:-30px;
		text-align: center;
	}
</style>

#{/set}
<div>
	<img class="img-responsive"  src="../public/images/grace.jpg" alt=""/>
	<span class="intro">这里是展示介绍</span>
</div>
<form class="form-horizontal"  action="">
	<div class="form-group col-md-12 col-md-push-1"  >
		<label class="col-sm-2 control-label">按板块</label>
		<div class="col-sm-4">
			<select class="form-control">
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
			</select>
		</div>
		<label class="col-sm-2 control-label">按时间</label>
		<div class="col-sm-4">
			<select class="form-control">
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
			</select>
		</div>
	</div>
</form>
<div class="main-content">
	<ul class="news news-ul">
		<li>
			<a href="@{SHowArticles.showNewsInfo}">便民利民的自助售药机</a>
			<span class="pull-right text-center hidden-xs">2014-04-03</span>
		</li>
		<li>
			<a>核心价值不能仅仅教给孩子</a>
			<span class="pull-right hidden-xs">2014-04-03</span>
		</li>
		<li>
			<a href="">一个外国人问我们为什么要反对CNN</a>
			<span class="pull-right hidden-xs">2014-04-03</span>
		</li>
		<li>
			<a href="">不要拿别人的错误来谩骂白岩松</a>
			<span class="pull-right hidden-xs">2014-04-03</span>
		</li>
		<li>
			<a href="">爆炒不忘扬祖先，蒋雯丽和犹太人挂上边</a>
			<span class="pull-right hidden-xs">2014-04-03</span>
		</li>
		<li class="br"></li>
		<li>
			<a href="">阜阳疫情迟公开暴露人祸大于灾难</a>
			<span class="pull-right hidden-xs">2014-04-03</span>
		</li>
		<li>
			<a href="">袁立和前夫博客开骂，创造现代炒作新高潮</a>
			<span class="pull-right hidden-xs">2014-04-03</span>
		</li>
		<li>
			<a href="">新生 第五章 4，战地救护</a>
			<span class="pull-right hidden-xs">2014-04-03</span>
		</li>
		<li>
			<a href="">失联航班，马方需要给出真相</a>
			<span class="pull-right hidden-xs">2014-04-03</span>
		</li>
		<li>
			<a href="">面对埃博拉，中国农民工雄纠纠地赶赴几内亚</a>
			<span class="pull-right hidden-xs">2014-04-03</span>
		</li>
		<li class="br"></li>
		<li>
			<a href="">丽水市委书记王永康，不是修表匠</a>
			<span class="pull-right hidden-xs">2014-04-03</span>
		</li>
		<li>
			<a href="">阜阳疫情迟公开暴露人祸大于灾难</a>
			<span class="pull-right hidden-xs">2014-04-03</span>
		</li>
		<li>
			<a href="">爆炒不忘扬祖先，蒋雯丽和犹太人挂上边</a>
			<span class="pull-right hidden-xs">2014-04-03</span>
		</li>
		<li>
			<a href="">不要拿别人的错误来谩骂白岩松</a>
			<span class="pull-right hidden-xs">2014-04-03</span>
		</li>
		<li>
			<a href="">核心价值不能仅仅教给孩子</a>
			<span class="pull-right hidden-xs">2014-04-03</span>
		</li>
	</ul>
	<div style="text-align:right">
		<ul class="pagination">
			<li><a href="#">&laquo;</a></li>
			<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">&raquo;</a></li>
		</ul>
	</div>
</div>
